<template>
	<view class="pd pt20  ">
		<view class=" display-flex pd pt20 pm20 yj8 bgff box">
			<view class="flex-1 display-flex">
				<image :src="ret.headUrl" class="cz dfdscxzrty"></image>
				<view class="ml20 flex-1 vertical-center tl">
					<view class="">
						<view class="fz32">
							{{ret.realName}}
							<!-- <text class="tag-label ab">离职</text> -->
						</view>
						<view class="z9 fz24 mt20">
							工作幸苦了~
						</view>
					</view>
				</view>
			</view>
			<view class=" vertical-center">
				<view class="bkxczr ab" @tap="jkxcd=true">
					{{jnmxzcfa}}年{{jnmxzcfb}}月 <text class="iconfont icon-down fz24"></text>
				</view>
			</view>
		</view>
		<view class="bgff pd pt20 pm20 mt20 yj8 box fz24" v-if="jkxczdfr==2">
			<view class="kkxzczxret ">
				<view class="">
					月份: <text class="z9 fz24"> {{jkzxczx.month}}</text>
				</view>
				<view class="">
					岗位/工号:<text class="z9 fz24">{{jkzxczx.companyNo}}</text>
				</view>
				<view class="">
					姓名:<text class="z9 fz24">{{jkzxczx.realName}}</text>
				</view>
				<view class="">
					入职日期: <text class="z9 fz24"> {{jkzxczx.companyTime}}</text>
				</view>
				<view class="">
					离职日期:<text class="z9 fz24">{{jkzxczx.leaveTime}}</text>
				</view>
				<view class="">
					出勤天数:<text class="z9 fz24">{{jkzxczx.workDay}}</text>
				</view>
				<view class="">
					平时加班: <text class="z9 fz24"> {{jkzxczx.overTime}}</text>
				</view>
				<view class="">
					周末加班:<text class="z9 fz24">{{jkzxczx.weekOverTime}}</text>
				</view>
				<view class="">
					工时小计:<text class="z9 fz24">{{jkzxczx.jobDay}}</text>
				</view>
				<view class="">
					餐补费: <text class="z9 fz24"> {{jkzxczx.mealBalance}}</text>
				</view>
				<view class="">
					扣餐费:<text class="z9 fz24">{{jkzxczx.mealUp}}</text>
				</view>
				<view class="">
					住宿水电:<text class="z9 fz24">{{jkzxczx.hydropower}}</text>
				</view>
				<view class="">
					扣迟到缺卡: <text class="z9 fz24"> {{jkzxczx.later}}</text>
				</view>
				<view class="">
					转账费:<text class="z9 fz24">{{jkzxczx.transfer}}</text>
				</view>
				<view class="">
					税费3%:<text class="z9 fz24">{{jkzxczx.taxation}}</text>
				</view>
				<view class="">
					其它扣款: <text class="z9 fz24"> {{jkzxczx.otherTake}}</text>
				</view>
				<view class="">
					其它补贴:<text class="z9 fz24">{{jkzxczx.otherSubsidy}}</text>
				</view>
				<view class="">
					保险:<text class="z9 fz24">{{jkzxczx.insure}}</text>
				</view>
				<view class="">
					借资: <text class="z9 fz24"> {{jkzxczx.borrow}}</text>
				</view>
				<view class="">
					总扣款:<text class="z9 fz24">{{jkzxczx.total}}</text>
				</view>
				<view class="">
					应发工资:<text class="z9 fz24">{{jkzxczx.balance}}</text>
				</view>
				<view class="">
					实际工资:<text class="z9 fz24">{{jkzxczx.wages}}</text>
				</view>

			</view>
			<view class=" mt20">
				备注:<text class="z9 fz24">{{jkzxczx.remark}}</text>
			</view>
		</view>
		<view class="vertical-center mt100" v-if="jkxczdfr==1">
			<image src="../../static/img/noData.png" class="xczxcertfdgtrr"></image>
			<view class="mt20 z9 fz24">
				暂无数据!
			</view>
		</view>
		<view class="kkxzczxertrt vertical-bottom" v-if="jkxcd">
			<view class="w100 bgff ">
				<view class="display-flex pd pt20 pm20 bbm">
					<view class="z9 fz32 flex-1" @tap="jkxcd=false">
						取消
					</view>
					<view class="ls fz32 pl40" @tap="xzxcferfet ">
						确认
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="fdccdfrtrt">
					<picker-view-column>
						<view class="item vertical-center" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item vertical-center" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>


	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import { hf, hfer, hfsan, dxrequest, VerifyTheLogin, upImg, yzphone, zidianall, transferTimeYMD } from "@/util/index.js"
	import { onLoad } from "@dcloudio/uni-app"
	const ret = ref({})
	const jkxczdfr = ref(0)
	const indicatorStyle = `height: 50px;`
	const date = new Date()
	const years = ref([])
	const months = ref([])
	const year = ref()
	const month = ref()
	const jkxcd = ref()
	const jkzxczx = ref({})
	year.value = date.getFullYear()
	month.value = date.getMonth() + 1
	const day = date.getDate()
	const jnmxzcfa = ref(year.value)
	const jnmxzcfb = ref(month.value)
	const value = ref([9999, month.value - 1, day])

	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.value.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.value.push(i)
	}


	const bindChange = (e) => {
		const val = e.detail.value
		console.log(val)
		year.value = years.value[val[0]]
		month.value = months.value[val[1]]
	}
	const mxzcf = async () => {
		uni.showLoading({
			title: "加载中"
		})
		const { data } = await dxrequest("/api/salary/page", {
			year: jnmxzcfa.value,
			month: jnmxzcfb.value
		})
		uni.hideLoading()
	
		if (data.list.length > 0) {
			jkxczdfr.value = 2
		} else {
			jkxczdfr.value = 1
		}
		console.log(jkxczdfr.value)
		console.log(5555555)
		try {
			jkzxczx.value = data.list[0]
		} catch (e) {

		}
	}
	mxzcf()

	const getuser = async () => {
		uni.showLoading({
			title: "加载中"
		})
		const openid = uni.getStorageSync("openid")
		const { data } = await dxrequest("/api/user/" + openid)
		ret.value = data
		uni.hideLoading()
	}
	getuser()

	const xzxcferfet = () => {
		jkxcd.value = false;
		jnmxzcfa.value = year.value
		jnmxzcfb.value = month.value
		value.value = [year.value, month.value - 1]
		mxzcf()
	}
</script>

<style scoped>
	.dfdscxzrty {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.kkxzczxertrt {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.fdccdfrtrt {
		height: 600rpx;
	}

	.fdsxcrt {
		height: 80rpx;
	}

	.xzczxrtt {
		height: 50rpx;
	}

	.kkxzczxret {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-column-gap: 0rpx;
		grid-row-gap: 20rpx
	}
</style>